// src/components/popups/sponsorTable/sponsorTableFilter/FromYearToYear.tsx

import type { FC } from "react";

interface FromYearToYearProps {
  fromYear: string;
  toYear: string;
  setFromYear: (value: string) => void;
  setToYear: (value: string) => void;
}

const FromYearToYear: FC<FromYearToYearProps> = ({
  fromYear,
  toYear,
  setFromYear,
  setToYear,
}) => {
  return (
    <div className="mb-4 w-full">
      <label className="block text-sm font-medium text-gray-700 dark:text-cyan-300 mb-2">
        Program From
      </label>
      <div className="space-y-3">
        <input
          type="number"
          min="0"
          value={fromYear}
          onChange={(e) => setFromYear(e.target.value)}
          placeholder="From Year"
          className="w-full border border-gray-300 dark:border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-700 bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100"
        />
        <input
          type="number"
          min="0"
          value={toYear}
          onChange={(e) => setToYear(e.target.value)}
          placeholder="To Year"
          className="w-full border border-gray-300 dark:border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-700 bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100"
        />
      </div>
    </div>
  );
};

export default FromYearToYear;